import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:sabre_sync_fencing/dd_core/dd_other.dart';

import '../../../dd_core/dd_log_service.dart';
import '../../../r.dart';
import '../../dd_personal_center/views/dd_view_background.dart';
import '../controllers/dd_pulish_second_controller.dart';

class DDPublishSecondPage extends StatefulWidget {
  const DDPublishSecondPage({Key? key}) : super(key: key);

  @override
  State<DDPublishSecondPage> createState() => _DDPublishSecondPageState();
}

class _DDPublishSecondPageState extends State<DDPublishSecondPage> {
  DDPublishSecondController _controller = DDPublishSecondController();

  final publishFormKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double itemWidth = (MediaQuery.of(context).size.width - 58) / 3;
    return GetBuilder<DDPublishSecondController>(
        init: _controller,
        initState: (state) {},
        dispose: (state) {},
        builder: (controller) {
          return Scaffold(
            appBar: AppBar(
              title: Text(''),
              leading: IconButton(
                icon: Image.asset(R.assetsImagesHomeSecond1),
                onPressed: () {
                  Get.back();
                },
              ),
              actions: [
                Container(
                  height: 32,
                  width: 70,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Color(0xFF4C5961),
                      width: 1.0,
                    ),
                    borderRadius: BorderRadius.circular(4.0),
                  ),
                  child: CupertinoButton(
                    color: Color(0xFF53BFD7),
                    borderRadius: BorderRadius.circular(4.0),
                    padding:
                        EdgeInsets.only(top: 0, bottom: 0, left: 10, right: 10),
                    onPressed: () {
                      if (publishFormKey.currentState!.validate()) {
                        if (_controller.images.length == 0 ||
                            _controller.selectedBackground.value.dd_isEmpty) {
                          EasyLoading.showToast(
                              "You need to fill in all the information before posting the article");
                          return;
                        }
                        DDLogService().ddGa(page: "pushlish_post");
                        _controller.submit();
                      } else {
                        EasyLoading.showToast(
                            "You need to fill in all the information before posting the article");
                      }
                    },
                    child: Text(
                      'Post',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Color(0xFFFFFFFF),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
              ],
            ),
            backgroundColor: Color(0xFFE7F6FC),
            body: GestureDetector(
              onTap: () {
                FocusScope.of(context).unfocus();
              },
              child: SafeArea(
                top: false,
                child: SingleChildScrollView(
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 20, right: 20, top: 8, bottom: 8),
                    child: Form(
                      key: publishFormKey,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Obx(
                            () => Wrap(
                              spacing: 8.0,
                              runSpacing: 8.0,
                              children: _controller.images.map((image) {
                                return Padding(
                                  padding: const EdgeInsets.all(0.0),
                                  child: Container(
                                    width: itemWidth,
                                    height: itemWidth,
                                    child: DDViewBackGround(
                                      content: Stack(
                                        children: [
                                          Image(
                                            image: Image.memory(image).image,
                                            fit: BoxFit.cover,
                                            width: itemWidth,
                                            height: itemWidth,
                                          ),
                                          Positioned(
                                            right: -5,
                                            top: -5,
                                            child: Container(
                                              child: IconButton(
                                                icon: Image.asset(
                                                  R.assetsImagesPublish5,
                                                  fit: BoxFit.cover,
                                                  height: 24,
                                                  width: 24,
                                                ),
                                                onPressed: () {
                                                  setState(() {
                                                    _controller.images
                                                        .remove(image);
                                                  });
                                                },
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                );
                              }).toList()
                                ..add(
                                  Padding(
                                    padding: const EdgeInsets.all(0.0),
                                    child: _controller.images.length < 3
                                        ? Container(
                                            width: itemWidth,
                                            height: itemWidth,
                                            child: DDViewBackGround(
                                              content: IconButton(
                                                icon: Image.asset(
                                                    R.assetsImagesPublish4),
                                                onPressed: () async {
                                                  _controller
                                                      .requestPhotosPermission();
                                                },
                                              ),
                                            ),
                                          )
                                        : Container(),
                                  ),
                                ),
                            ),
                          ),
                          SizedBox(height: 16),
                          TextFormField(
                            decoration: InputDecoration(
                              hintText: "Enter the title.",
                              counterText: '',
                            ),
                            maxLines: 1,
                            maxLength: 100,
                            controller: _controller.control1,
                            textAlign: TextAlign.start,
                            focusNode: _controller.focusNode1,
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Please enter the title.';
                              }
                              return null;
                            },
                          ),
                          SizedBox(height: 24),
                          DDViewBackGround(
                            content: Padding(
                              padding: const EdgeInsets.only(
                                  left: 16, right: 16, bottom: 16, top: 0),
                              child: TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Start your creation...',
                                  border: InputBorder.none,
                                  hintStyle: TextStyle(
                                      color: Colors.grey, fontSize: 12),
                                ),
                                maxLines: 5,
                                maxLength: 500,
                                controller: _controller.control2,
                                textAlign: TextAlign.start,
                                focusNode: _controller.focusNode2,
                                validator: (value) {
                                  if (value == null || value.isEmpty) {
                                    return 'Please start your creation.';
                                  }
                                  return null;
                                },
                              ),
                            ),
                          ),
                          SizedBox(height: 32),
                          Text('Background Style',
                              style: TextStyle(fontWeight: FontWeight.bold)),
                          SizedBox(height: 14.0),
                          Wrap(
                            spacing: 8.0,
                            runSpacing: 8.0,
                            children: [
                              _buildBackgroundOption(
                                  R.assetsImagesPublish6, 'bg1', context),
                              _buildBackgroundOption(
                                  R.assetsImagesPublish8, 'bg2', context),
                              _buildBackgroundOption(
                                  R.assetsImagesPublish7, 'bg3', context),
                              _buildBackgroundOption(
                                  R.assetsImagesPublish9, 'bg4', context),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }

  Widget _buildBackgroundOption(
      String assetPath, String value, BuildContext context) {
    double itemWidth2 = (MediaQuery.of(context).size.width - 48) / 2;
    return GestureDetector(
        onTap: () {
          _controller.checkMyBg(
            context,
            value,
            assetPath,
          );
          setState(() {});
        },
        child: Obx(() => Stack(
              children: [
                Container(
                  width: itemWidth2,
                  height: 91,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: _controller.selectedBackground == value
                          ? Colors.blue
                          : Colors.transparent,
                      width:
                          _controller.selectedBackground == value ? 3.0 : 0.0,
                    ),
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: AssetImage(assetPath),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                _controller.myStyleObs.contains(value) == false
                    ? Positioned(
                        top: 6,
                        right: 10,
                        child: Container(
                          width: 38,
                          height: 14,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(45.0),
                          ),
                          child: value == 'bg4'
                              ? Center(
                                  child: Text(
                                  'Free',
                                  style: TextStyle(
                                      fontSize: 10,
                                      color: Color(0xFF8FD045),
                                      fontWeight: FontWeight.w800),
                                ))
                              : Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.only(
                                          top: 2, bottom: 2, left: 0, right: 0),
                                      child: Image.asset(
                                        R.assetsImagesPerson11,
                                        height: 22,
                                      ),
                                    ),
                                    // SizedBox(width: 5),
                                    Text(
                                      '48',
                                      style: TextStyle(
                                        fontSize: 10,
                                        color: Color(0xFF53BFD7),
                                      ),
                                    ),
                                    SizedBox(width: 4),
                                  ],
                                ),
                        ),
                      )
                    : SizedBox(),
              ],
            )));
  }
}
